.index-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部导航栏留出空间

  // 优惠活动区域
  .promotions-section {
    padding: 30rpx 30rpx 40rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .section-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      .more-link {
        font-size: 28rpx;
        color: #4facfe;
      }
    }

    .promotions-list {
      display: flex;
      gap: 20rpx;

      .promotion-card {
        flex: 1;
        border-radius: 20rpx;
        padding: 30rpx;
        position: relative;
        overflow: hidden;

        .promotion-content {
          position: relative;
          z-index: 2;

          .promotion-type {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8rpx;
            display: block;
          }

          .promotion-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8rpx;
            display: block;
          }

          .promotion-desc {
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20rpx;
            display: block;
          }

          .promotion-btn {
            --nutui-button-default-background-color: rgba(255, 255, 255, 0.2);
            --nutui-button-default-color: #fff;
            --nutui-button-border-radius: 20rpx;
            --nutui-button-font-size: 24rpx;
            --nutui-button-small-height: 60rpx;
            --nutui-button-small-padding: 0 20rpx;
            backdrop-filter: blur(10rpx);
            border: 1px solid rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
  }

  // 服务类型区域
  .services-section {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
      display: block;
    }

    .services-grid {
      display: flex;
      justify-content: space-around;

      .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rpx;

        .service-icon {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

          .icon-text {
            font-size: 48rpx;
          }
        }

        .service-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }

  // 快捷预约区域
  .booking-section {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
      display: block;
    }

    .booking-list {
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .booking-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #f8f9fa;
        border-radius: 16rpx;
        gap: 24rpx;

        .booking-icon {
          width: 80rpx;
          height: 80rpx;
          background-color: #e3f2fd;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon-text {
            font-size: 36rpx;
          }
        }

        .booking-content {
          flex: 1;

          .booking-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
            display: block;
          }

          .booking-subtitle {
            font-size: 26rpx;
            color: #666;
          }
        }

        .booking-btn {
          --nutui-button-default-color: #fff;
          --nutui-button-border-radius: 20rpx;
          --nutui-button-font-size: 26rpx;
          --nutui-button-small-height: 64rpx;
          --nutui-button-small-padding: 0 24rpx;
          font-weight: 500;
        }
      }
    }
  }

}

// 响应式适配
@media screen and (max-width: 375px) {
  .index-page {
    .promotions-section,
    .services-section,
    .booking-section {
      padding-left: 20rpx;
      padding-right: 20rpx;
    }

    .promotions-list {
      flex-direction: column;
      gap: 16rpx;
    }

    .services-grid {
      .service-item {
        .service-icon {
          width: 100rpx;
          height: 100rpx;

          .icon-text {
            font-size: 40rpx;
          }
        }

        .service-name {
          font-size: 26rpx;
        }
      }
    }
  }
}